<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="true" %>
<html>
<head>
    <title>销售订单出库</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <i-table  ref="table" :columns="myColumns" :data="pageResult.rows" :height="400" border stripe @on-row-dblclick="rowClick"  @on-selection-change="tableSelection=arguments[0]" ><!--  @on-row-click="rowClick"-->
        <template slot-scope="{row}" slot="type">
            <span>{{row.type==1?"采购":"销售"}}</span>
        </template>
        <template  slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未出库":"已出库"}}</span>
        </template>
        <template  slot-scope="{row}" slot="creator">
            <span>{{row.user.username}}</span>
        </template>
        <template  slot-scope="{row}" slot="stockKeeper">
            <span>{{row.user.username}}</span>
        </template>

    </i-table>
    <modal  v-model="OrderFlag" title="订单详请" width="700">
        <div style="width: 660px;height: 140px ;border: 0.5px lightgray solid">
            <i-form :label-width="80" >
                <form-item label="流水号:"style="float: left;">
                    <i-input v-model="order.id" size="large" style="width: 110px;text-align: center"readonly/>
                </form-item>
                <form-item label="录入日期:" style="float: left">
                    <i-input  style="width: 130px;" v-model="order.createTime" size="large"readonly/>
                </form-item>
                <form-item label="出库日期:"style="float: left">
                    <i-input  style="width: 130px;text-align: center" v-model="order.stockTime" size="large"readonly/>
                </form-item>
                <form-item label="销售员:"style=" margin-top:-10px;float: left">
                    <i-input   style="width: 110px;text-align: center"v-model="order.creatorName" size="large"readonly/>
                </form-item>
                <form-item label="库管员:"style="margin-top:-10px;float: left">
                    <i-input  style="width: 130px;text-align: center" v-model="order.stockKeeperName" size="large"readonly/>
                </form-item>
                <form-item label="客户:"style="margin-top:-10px;float:left">
                    <i-input  style="width: 130px;text-align: center" v-model="order.providerIdName" size="large"readonly/>
                </form-item>
                <form-item label="状态:"style="margin-top:-10px;float:left">
                    <i-select  v-model="order.state" style="width: 110px;background-color: white" disabled="disabled">
                        <i-option value="0" >未出库</i-option>
                        <i-option value="1">已出库</i-option>
                    </i-select>
                    <!--     <i-input  style="width: 110px;text-align: center" v-model="order.state" size="large"readonly/>-->
                </form-item>
            </i-form>
        </div>
        <i-table style="clear:both;" :columns="Columns1"  :data="mydata" :height="200" border stripe  @on-row-dblclick="rowClick1" >
            <template  slot-scope="{row}" slot="state">
                <span>{{row.state==1?"已出库":"未出库"}}</span>
            </template>
        </i-table>
        <div slot="footer"></div>
    </modal>
    <modal v-model="OrderDetailFlag" title="订单明细" width="500">
        <!--<i-table :columns="Columns2" :data="mydata1" :height="200" border stripe >
            <template slot-scope="{row}" slot="storehouseId">
                <i-select   style=" margin-left:-19px;width: 100px;">
                    <i-Option v-for="item1 in cangkuList" :value="item1.id" :key="item1.id">{{item1.cangkuName}}</i-Option>
                </i-select>
            </template>
            <template slot-scope="{row,index}"  slot="action">
                <i-button type="warning" size="small" @click="chuku(row)">出库</i-button>
            </template>
        </i-table>-->
        <i-form :label-width="80" style=" height:135px"  >
            <form-item label="商品ID:"style="float: left;">
                <i-input v-model="orderDetail.goodsId" size="large" style="width: 110px;text-align: center"readonly/>
            </form-item>
            <form-item label="商品名称:" style="float: left;">
                <i-input  style="width: 120px;" v-model="orderDetail.goodsName" size="large"readonly/>
            </form-item>
            <form-item label="数量:"style="float: left">
                <i-input  style="width: 110px;text-align: center" v-model="orderDetail.num" size="large"readonly/>
            </form-item>
            <form-item label="仓库:" style="float: left;">
                <i-select v-model="orderDetail.storehouseId" style="width: 120px;">
                    <i-Option v-for="item1 in cangkuList" :value="item1.id" :key="item1.id">{{item1.cangkuName}}</i-Option>
                </i-select>
            </form-item>
            <hr style="clear: both;">

        </i-form>
        <div slot="footer">
            <i-button type="warning" icon ="ios-log-out"  @click="chuku">出库</i-button>
            <i-button type="info" icon="md-archive" @click="caiDao">导出</i-button>
            <i-button type="error" icon="ios-print-outline" @click="exportPdf">打印浏览</i-button>
        </div>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];searchXsOrderList();"
          show-sizer
          :page-size-opts="[5,10,15]"
    <%--	@on-page-size-change切换每页条数时的回调，返回切换后的每页条数--%>
          @on-page-size-change="pageSize=arguments[0];searchXsOrderList();"
    />
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            myColumns:[
                {title:"编号",key: "id",align:"center"},
                {slot:"type",title:"类型",align:"center"},
                {title:"录入日期",key: "createTime",align:"center",width:119},
                {title:"出库日期",key: "stockTime",align:"center",width:119},
                {title:"销售员",key: "creatorName",align:"center"},
                {title:"库管员",key: "stockKeeperName",align:"center"},
                {title:"客户",key: "providerIdName",align:"center"},
                {title:"合计金额",key: "totalMoney",align:"center"},
                {slot:"state",title:"状态",align:"center"},
                // {title:"运单号",key: "wayBillCode",align:"center",width:119},
            ],
          /*  Columns:[
                {title:"流水号",key:"id",align:"center"},
                {title:"录入日期",key: "createTime",align:"center",width:119},
              //  {title:"审核日期",key: "checkTime",align:"center",width:119},
                {title:"出库日期",key: "stockTime",align:"center",width:119},
                {title:"销售员",key: "creatorName",align:"center"},
                {title:"库管员",key: "stockKeeperName",align:"center"},
                {title:"客户",key: "providerIdName",align:"center"},
            ],*/
            Columns1:[
                {title:"编号",key: "id",align:"center"},
                {title:"商品编号",key: "goodsId",align:"center",width:119},
                {title:"商品名称",key: "goodsName",align:"center",width:119},
                {title:"商品价格",key: "price",align:"center",width:119},
                {title:"数量",key: "num",align:"center"},
                {title:"金额 ",key: "money",align:"center"},
                {title:"状态",slot: "state",align:"center"},
            ],
            Columns2:[
                {title:"商品ID",key: "goodsId",align:"center",width:119},
                {title:"商品名称",key: "goodsName",align:"center",width:119},
                {title:"数量",key: "num",align:"center"},
                {title:"仓库",slot: "storehouseId",align:"center",},
                {title:"操作",slot:"action"}
            ],
            pageResult:{
                rows:[],
                total:50,
            },
            mydata:[],
            mydata1:[],
            pageNo:1,
            pageSize:5,
            order:{},
            orderDetail:{},
            kehuList:[],
            cangkuList:[],
            goodsList:[],
            tableSelection:[],
            addFlag:false,
            OrderFlag:false,
            OrderDetailFlag:false,
        },
        mounted(){
            this.searchXsOrderList();
            this.searchKehuList();
            this.searchGoodsList();
            this.searchCangKuList();
        },
        methods:{
            searchXsOrderList(){
                axios.get(`${ctx}/sal/xxddlr/search1/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchKehuList(){
                axios.get(`${ctx}/jibenxinxi/kehu/list`)
                    .then(({data})=>{
                        this.kehuList=data.result;
                    });
            },
            searchCangKuList(){
                axios.get(`${ctx}/jibenxinxi/ck/list1`)
                    .then(({data})=>{
                        this.cangkuList=data.result;
                    });
            },
            searchGoodsList(){
                axios.get(`${ctx}/jibenxinxi/sp/list`)
                    .then(({data})=>{
                        this.goodsList=data.result;
                    });
            },
            //点击弹出订单详情
            rowClick(data1,index){//data 该行数据 ，index该行索引
                //  this.$refs.table.toggleSelect(index);
                axios.get(`${ctx}/sal/xxddlr/list?id=${data1.id}`)
                    .then(({data})=>{
                        this.mydata=data.result;
                        Object.assign(this.order,data1);
                        this.OrderFlag=true;
                    })},
            //点击弹出订单明细
            rowClick1(data2,index){//data 该行数据 ，index该行索引
                Object.assign(this.orderDetail,data2);
                this.OrderDetailFlag=true;
                    },
            chuku(row){
                axios.post(`${ctx}/sal/xxddck/chuku`,this.orderDetail)
                    .then(({data})=>{
                        this.OrderDetailFlag=false;
                        this.OrderFlag=false;
                        iview.Message.success({content:data.msg});
                        this.searchXsOrderList();
                    });
            },
            caiDao(){


                //获得你要携带的参数
                location.href=`${ctx}/sal/xxddck/exportE?id=${this.order.id}
                 &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}


                `

            },
            exportPdf(){
                location.href=`${ctx}/sal/xxddck/exportP?id=${this.order.id}
                 &providerIdName=${this.order.providerIdName}
                &creatorName=${this.order.creatorName}


                `

            }
        }
    })
</script>
</html>
